<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import 'element-plus/es/components/message/style/css';
import clickoutside from 'element-plus/lib/directives/click-outside/index';
import { contextMenuProps } from '../src/contextmenu';
import useStore from '@/store';
defineOptions({ name: 'WindowsContextMenu' });
const vClickoutside = clickoutside;
const showMenu = ref(false);
const hide = () => {
  showMenu.value = false;
};
const props = defineProps(contextMenuProps);
//
const menuMain = ref(null);
const left = ref(0);
const top = ref(0);
const show = () => {
  showMenu.value = true;
  var height = props.menus.length * 36;
  var widht = 200;
  const screenWidth = document.body.clientWidth;
  const screenHeight = document.body.clientHeight;
  var e = props.mouse;
  let clientX = e.clientX;
  if (e.clientX > screenWidth - widht) {
    clientX = screenWidth - widht;
  }
  let clientY = e.clientY;
  if (e.clientY > screenHeight - height) {
    clientY = screenHeight - height;
  }
  left.value = clientX;
  top.value = clientY;
};
const handleClick = item => {
  if (item.fn && typeof item.fn === 'function') {
    item.fn();
  }
  showMenu.value = false;
};
const pass = license => {
  if (license && useStore.setting.licenses.indexOf(license) == -1) return false;
  return true;
};
onMounted(() => {
  //bindEvents();
});
</script>

<template>
  <div class="contextmenu" v-if="showMenu" v-clickoutside="hide">
    <ul
      class="menuMain"
      ref="menuMain"
      :style="{
        left: left + 'px',
        top: top + 'px',
      }"
    >
      <li v-for="item in props.menus" :style="{ opacity: pass(item.license) ? 1 : 0.5 }">
        <div @click="handleClick(item)" class="line__content">
          <!-- <el-icon :size="18"><component :is="item.icon" /></el-icon> -->
          <span>{{ item.label }}</span>
        </div>
        <div class="mask" v-show="!pass(item.license)"></div>
      </li>
    </ul>
  </div>
</template>

<style scoped lang="scss">
.contextmenu {
  position: fixed;
  /* width: 100vw;
  height: 100vh; */
  top: 0;
  left: 0;
  z-index: 9999;
  user-select: none;
}
.menuMain {
  box-sizing: border-box;
  position: fixed;
  padding: 0;
  list-style: none;
  border-radius: 2px;
  margin: 0;
  overflow: hidden;
  min-width: 180px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
  font-size: 12px;
  li {
    position: relative;
    padding: 5px;
    .line__content {
      z-index: 1;
      padding: 5px;
      cursor: pointer;
      display: flex;
      align-items: center;
      padding-left: 20px;
      padding-right: 50px;
      span {
        margin-left: 8px;
      }
      &:not(.disabled):hover {
        background-color: #409eff;
        color: #fff;
        border-radius: 2px;
      }
      &:last-child {
        margin-bottom: 0px;
      }
    }

    .mask {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      z-index: 2;
      cursor: no-drop;
    }
  }
  .disabled {
    opacity: 0.3;
    cursor: not-allowed;
  }
}
</style>
